﻿<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>数据状态查看分析</title>
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <script src="/static/js/common/common.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/js/main-page/echarts.min.js"></script>
    <link href="/static/css/resource.css" rel="stylesheet" type="text/css" />
    <link href="/webjars/miniui/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/default.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/css/main-page/g-reset.css" />
    <style type="text/css">
        body {
            margin:0;
            padding:0;
            border:0;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .discell {
            text-align:right;
            width:80px;
        }
        .input {
            width:400px;
        }
        .mt-24 {
            margin-bottom:24px;
        }
        .AnalysContent {
            background:#fff;
            padding:16px 20px;
        }
        .mini-grid-rows-view {
            overflow-x:hidden;
        }
    </style>
</head>
<body>
<div class="mini-fit" style="height:100%;width: 100%;overflow-x: auto;overflow-y: auto;" id="form1" name="form1">
    <div style="width:100%;height:100%;overflow-y:auto">
        <div id="div1" style="border-bottom: 1px solid #dfdfdf;">
            <table style="border-collapse:separate; border-spacing:10px;margin-left: auto;">
                <tbody>
                    <tr>
                    </tr>
                    <tr>
                        <td class="discell">省份:</td>
                        <td>
                            <input name="province" id="province" class="mini-combobox" style="width: 140px"
                                   textField="value" valueField="key" emptyText="请选择..."
                                   url="/azbj/sjtjfx/xzzttj/getProvince" />
                        </td>
                        <td class="discell">录入类别:</td>
                        <td>
                            <input name="pstate" id="pstate" class="mini-combobox" style="width: 170px"
                                   textField="value" valueField="key" emptyText="请选择..." value="5"
                                   url="/azbj/sjtjfx/xzzttj/getPstateList" />
                        </td>
                        <td class="discell">单位:</td>
                        <td>
                            <input name="unitInput" id="unitInput" class="mini-combobox" style="width: 125px"
                                   textField="1" valueField="0" emptyText="请选择..." /><#--allowInput="true"-->
                        </td>
                        <td class="discell">时间范围:</td>
                        <td>
                            <input property="editor" class="mini-datepicker" id="begin" name="begin" allowInput="false"
                                   emptyText="开始日期" style="width: 100%;" ondrawdate="onDrawDate" />
                        </td>
                        <td>
                            <input property="editor" class="mini-datepicker" id="end" name="end" allowInput="false"
                                   emptyText="结束日期" style="width: 100%;" ondrawdate="onDrawDate" />
                        </td>
                        <td style="text-align:right;" colspan="5">
                            <a class="mini-button" onclick="statistics()">统计</a>
                            <a class="mini-button" onclick="reset()">重置</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="mini-fit" style="overflow-y:auto">
            <div id="main">
                <ul id="linechart" class="clearfix"></ul>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    mini.parse();
    var begin = mini.get("begin"); // 开始时间
    var end = mini.get("end");    // 结束时间
    var unit = null;
    var unitInput = mini.get("unitInput");//单位
    var storage;

    function onDrawDate(e) {
        var date = e.date;
        var d = new Date();
        var y = new Date();
        if (date.getTime() > d.getTime())
        {
            e.allowSelect = false;
        }
        y.setFullYear(y.getFullYear() - 1)
        if (date.getTime() < y.getTime())
        {
            e.allowSelect = false;
        }
    }

    $(function (){
        mini.mask({
            el: document.getElementById("form1"),
            cls: 'mini-mask-loading',
            html: '加载中...'
        });
        remobeLi("linechart");
        getCurrentProvince();
        queryData(null, null, null);
        begin.setValue(new Date(new Date()-24*60*60*7000));
        end.setValue(new Date(new Date()-24*60*60*1000));
    });

    //获取当前省份
    function getCurrentProvince(){
        $.ajax({
            url: '/azbj/sjtjfx/xzzttj/getCurrentProvince',
            type: "GET",
            success: function (res) {
                mini.get("province").setValue(res);
            }
        });
    }

    //查询
    function queryData(begin, end, province, dateType, unitId){
        $.ajax({
            url: '/azbj/sjtjfx/xzzttj/getUnit',
            type: "GET",
            data: {begin: begin, end: end, pstate: mini.get("pstate").value, province:province, unitId:unitId},
            success: function (res) {
                var data = JSON.parse(res.data);
                unit = data.unit;
                if(unit==null){
                    $("#linechart").html('<div id="nodata" style="text-align: center;height:300px;line-height: 300px;font-size: 20px">暂无数据...</div>');
                    $('#linechart').removeAttr('_echarts_instance_');
                    mini.unmask(document.getElementById("form1"));
                    return;
                }else {
                    storage = new Map();
                    for(var i=0;i<unit.length;i++){
                        var id = unit[i].adduserid;
                        var name = unit[i].addusername;
                        storage.set(id, name);
                        //拿具体数据
                        $.ajax({
                            url: '/azbj/sjtjfx/xzzttj/getStatusStatisticsData',
                            type: "GET",
                            data: {begin: begin, end: end, pstate: mini.get("pstate").value, province:province, id:id, dateType:dateType},
                            success: function (res) {
                                var data = JSON.parse(res.data);
                                // addLineChart(data.date, data.amount, id, name);
                                setHtml("linechart", data.date, data.amount, data.id, storage.get(data.id));

                            }
                        });
                    }
                    unitInput.setData(Array.from(storage))
                }
                mini.unmask(document.getElementById("form1"));
            }
        });
    }

    //html
    function setHtml(type, xAxisData, seriesData, code, name){
        var ul = document.getElementById(type);
        var li = document.createElement("li");
        li.setAttribute("class", "fl");
        li.setAttribute("style", "width: 50%;height: 400px;margin:20px 0");
        var div = document.createElement("div");
        div.setAttribute("id", "linegram" + code);
        div.setAttribute("style", "height: 100%;width: 100%;");
        li.appendChild(div);
        ul.appendChild(li);
        addLineChart("linegram" + code, xAxisData, seriesData, name);
    }

    //生成折线图
    function addLineChart(code, xAxisData, seriesData, name){
        var divElement = echarts.init(document.getElementById(code));
        option = {
            title: {
                text: name
            },
            xAxis: {
                type: 'category',
                data: xAxisData,
                axisLabel: {
                    rotate: 40
                }
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: 'axis'
            },
            series: [
                {
                    name: name + '-' + mini.get("pstate").getText() + '-新增数量',
                    data: seriesData,
                    type: 'line'
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        divElement.setOption(option, true);
    }



    // 删除ul标签中的所有li标签
    function remobeLi(type) {
        var ul = document.getElementById(type);
        while (ul.hasChildNodes()) {
            ul.removeChild(ul.firstChild);
        }
    }

    //点击按钮
    function statistics(){
        var dateType = 1;
        if (begin.getValue() > end.getValue()){
            mini.alert("开始时间不能大于结束时间");
            return;
        }
        var day =  (Date.parse(end.getValue()) - Date.parse(begin.getValue())) / (1 * 24 * 60 * 60 * 1000);
        if(day >= 30){
            dateType = 2;
        }
        remobeLi("linechart");
        storage = null;
        queryData(mini.formatDate(begin.getValue(), 'yyyy-MM-dd'), mini.formatDate(end.getValue(), 'yyyy-MM-dd'), mini.get("province").value, dateType, unitInput.value);
    }

    //重置按钮
    function reset(){
        begin.setValue('');
        end.setValue('');
        mini.get("pstate").setValue('5');
        remobeLi("linechart");
        queryData(null, null, null);
        getCurrentProvince();
    }

</script>

</body>
</html>